<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Restaurant Home Page</title>
        <meta name="description" content="Handbag" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <script src="js/jquery.fancybox-1.3.4.js"></script>
        <link rel="stylesheet" href="js/jquery.fancybox-1.3.4.css" type="text/css"/>


        <link rel="stylesheet" href="css/layout.css" type="text/css"/>
        <link rel="stylesheet" href="css/ws_container.css" type="text/css"/>
        <link rel="stylesheet" href="css/ws_gallery.css" type="text/css"/>

        <!-- HOT LINE -->
        <link rel="stylesheet" href="../../widget/hotline/0/hotline_0.css" type="text/css"/>
        <!-- LOGO -->
        <link rel="stylesheet" href="../../widget/logo/3/logo_3.css" type="text/css" />
        <!-- SEARCH -->
        <link rel="stylesheet" href="../../widget/search_bar/3/search_bar_3.css" type="text/css" />
        <!-- HMENU -->
        <link rel="stylesheet" href="../../widget/hmenu/4/hmenu_4.css" type="text/css" />
        <!-- BREADCRUMBS -->
        <link rel="stylesheet" href="../../widget/breadcrumbs/1/breadcrumbs_1.css" type="text/css" />
        <!-- BANNER -->
        <link rel="stylesheet" href="../../widget/banner/80/banner_80.css" type="text/css" />
        <!-- HTML BLOCK 1 -->
        <link rel="stylesheet" href="../../widget/html_block/1/html_1.css" type="text/css" />
        <!-- HTML BLOCK 8 -->
        <link rel="stylesheet" href="../../widget/html_block/8/html_8.css" type="text/css" />
        <!-- HTML BLOCK 9 -->
        <link rel="stylesheet" href="../../widget/html_block/9/html_9.css" type="text/css" />
        <!-- TEXT LIST 1 -->
        <link rel="stylesheet" href="../../widget/text_list/1/text_list_1.css" type="text/css" />
        <!-- Social 8 -->
        <link rel="stylesheet" href="../../widget/social_network/8/social_8.css" type="text/css" />
        <!-- IMAGE LIST 8 -->
        <link rel="stylesheet" href="../../widget/image_list/8/image_list_8.css" type="text/css" />
        <!-- GALLERY DETAILS 1 -->
        <link rel="stylesheet" href="../../widget/gdetail/1/gdetail_1.css" type="text/css" />
        <!-- OTHER GALLERY 1 -->
        <link rel="stylesheet" href="../../widget/gother/1/gother_1.css" type="text/css" />

        <script type="text/javascript">
            $(document).ready(function() {
                $(".fancybox").fancybox();
            });
        </script>
    </head>



    <body>
        <div id="wrapper">	
            <div id="wrapper_top">
                <div id="wrapper_header_1">
                    <div id="hook_header" class="hook">
                        <!-- hook header : widget : hotline, logo, search bar -->

                        <!-- HOTLINE WIDGET -->

                        <div id="hotline_wi" class="hotline_0">
                            <img src="images/hotline_logo.png" alt="hotline_logo" class="hl_align_left"/>
                            <div class="hl_infor">
                                <div class="hl_content">
                                    Call us for reservation
                                </div><!-- End .hl_conent -->
                                <div class="hl_phone_number">
                                    (84)851236536
                                </div><!-- End .hl_phone_number -->
                            </div><!-- End .hl_infor -->
                        </div><!-- End .hotline_0 -->
                        <!-- End HOTLINE WIDGET -->

                        <!-- LOGO WIDGET -->
                        <div id="logo_wi" class="logo_3">

                            <div class="logo_content_wrapper">
                                <div class="logo_content">
                                    <h1 class="company_name">Tiara</h1>
                                    <h3 class="company_description">Restaurant</h3>
                                </div><!-- End .logo_content -->
                            </div><!-- End .logo_content_wrapper -->
                        </div>
                        <!-- End LOGO WIDGET -->

                        <!-- SEARCH BAR WIDGET -->
                        <div id="search_bar_wi" class="search_bar_3">
                            <form class="searchForm" method="post" action="#">
                                <div class="search_bar_wrapper">
                                    <input class="search_text" type="text" name="txtsearch" value="Search keyword here"/>
                                    <input class="search_submit" type="submit" name="btnsearch" value=">"/>
                                </div><!-- End #search_bar_wrapper -->
                            </form>
                        </div><!-- End .search_bar_3 -->
                        <!-- End SEARCH BAR WIDGET -->
                        <style>


                        </style>
                        <!-- HMENU WIDGET -->
                        <div id="hemnu_wi" class="hemnu_4">
                            <div class="hmenu_wrapper">
                                <div class="hemnu_bullet_left"></div>
                                <ul class="hmenu_items">
                                    <li><a href="home.html">Home</a></li>
                                    <li><a href="introduction.html">About us</a></li>
                                    <li class="current"><a href="#">Gallery</a></li>
                                    <li><a href="#">Contact</a></li>
                                    <li><a href="#">Blog</a></li>
                                    <li class="last_item"><a href="news.html">News</a></li>
                                </ul>
                                <div class="hemnu_bullet_right"></div>
                            </div><!--End hmenu_wrapper-->
                        </div>
                        <!-- End HEMNU WIDGET -->

                    </div><!-- End hook_header -->
                </div><!-- End #wrapper_header_1 -->
            </div>
            <!-- End wrapper_top -->

            <!--- Wrapper MAIN --->

            <div id="wrapper_main">
                <div id="hook_breadcrumbs" class="hook">
                    <div id="wrapper_breadcrumbs">
                        <ul>
                            <li>
                                <a href="#">Trang chủ</a>
                            </li>

                            <li>
                                <a href="#">Gallery</a>
                            </li>

                            <li class="current">
                                <a href="#">Proin interdum magna non justo interdum</a>
                            </li>


                        </ul>
                    </div><!-- #wrapper_breadcrumbs -->
                </div>

                <div id="wrapper_gallery">

                    <div id="wrapper_page_heading">
                        <div id="hook_page_heading" class="hook">

                            <div id="html_heading_wi" class="html_block_2">
                                <h1 class="title">Gallery</h1>
                            </div>

                        </div>
                        <!-- End #hook_page_heading -->

                    </div><!-- End #wrapper_page_heading -->

                    <div id="wrapper_gallery_list">
                        <div id="hook_gallery_list" class="hook">

                            <div id="gdetail_1" class="gdetail_1">
                                <h1 class="title">Proin interdum magna non justo interdum </h1>
                                <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit massa vel mauris sollicitudin dignissim</p>

                                <div class="image_list">
                                    <ul>
                                        <li>
                                            <div class="images">
                                                <a class="fancybox" rel="group"  href="images/gallery_image_2.png">
                                                    <img src="images/gallery_image_2.png" alt="" />
                                                    <img class="hoverimage" src="images/image_hover_bg.png" alt="" />
                                                </a>
                                            </div>

                                        </li>

                                        <li>
                                            <div class="images">
                                                <a class="fancybox" rel="group"  href="images/gallery_image_2.png">
                                                    <img src="images/gallery_image_2.png" alt="" />
                                                    <img class="hoverimage" src="images/image_hover_bg.png" alt="" />
                                                </a>
                                            </div>
                                        </li>

                                        <li>
                                            <div class="images">
                                                <a class="fancybox" rel="group"  href="images/gallery_image_2.png">
                                                    <img src="images/gallery_image_2.png" alt="" />
                                                    <img class="hoverimage" src="images/image_hover_bg.png" alt="" />
                                                </a>
                                            </div>
                                        </li>

                                        <li class="last">
                                            <div class="images">
                                                <a class="fancybox" rel="group"  href="images/gallery_image_2.png">
                                                    <img src="images/gallery_image_2.png" alt="" />
                                                    <img class="hoverimage" src="images/image_hover_bg.png" alt="" />
                                                </a>
                                            </div>
                                        </li>

                                        <li>
                                            <div class="images">
                                                <a class="fancybox" rel="group"  href="images/gallery_image_2.png">
                                                    <img src="images/gallery_image_2.png" alt="" />
                                                    <img class="hoverimage" src="images/image_hover_bg.png" alt="" />
                                                </a>
                                            </div>
                                        </li>

                                        <li>
                                            <div class="images">
                                                <a class="fancybox" rel="group"  href="images/gallery_image_2.png">
                                                    <img src="images/gallery_image_2.png" alt="" />
                                                    <img class="hoverimage" src="images/image_hover_bg.png" alt="" />
                                                </a>
                                            </div>
                                        </li>

                                        <li>
                                            <div class="images">
                                                <a class="fancybox" rel="group"  href="images/gallery_image_2.png">
                                                    <img src="images/gallery_image_2.png" alt="" />
                                                    <img class="hoverimage" src="images/image_hover_bg.png" alt="" />
                                                </a>
                                            </div>
                                        </li>

                                        <li class="last">
                                            <div class="images">
                                                <a class="fancybox" rel="group"  href="images/gallery_image_2.png">
                                                    <img src="images/gallery_image_2.png" alt="" />
                                                    <img class="hoverimage" src="images/image_hover_bg.png" alt="" />
                                                </a>
                                            </div>
                                        </li>

                                        <li>
                                            <div class="images">
                                                <a class="fancybox" rel="group"  href="images/gallery_image_2.png">
                                                    <img src="images/gallery_image_2.png" alt="" />
                                                    <img class="hoverimage" src="images/image_hover_bg.png" alt="" />
                                                </a>
                                            </div>
                                        </li>

                                        <li>
                                            <div class="images">
                                                <a class="fancybox" rel="group"  href="images/gallery_image_2.png">
                                                    <img src="images/gallery_image_2.png" alt="" />
                                                    <img class="hoverimage" src="images/image_hover_bg.png" alt="" />
                                                </a>
                                            </div>
                                        </li>

                                        <li>
                                            <div class="images">
                                                <a class="fancybox" rel="group"  href="images/gallery_image_2.png">
                                                    <img src="images/gallery_image_2.png" alt="" />
                                                    <img class="hoverimage" src="images/image_hover_bg.png" alt="" />
                                                </a>
                                            </div>
                                        </li>

                                        <li class="last">
                                            <div class="images">
                                                <a class="fancybox" rel="group"  href="images/gallery_image_2.png">
                                                    <img src="images/gallery_image_2.png" alt="" />
                                                    <img class="hoverimage" src="images/image_hover_bg.png" alt="" />
                                                </a>
                                            </div>
                                        </li>


                                    </ul>
                                    <div class="clear"></div>

                                </div><!-- End .image_list -->
                            </div>
                            <!-- End .gdetail_1 -->
                        </div><!-- End #hook_gallery_list -->

                    </div><!-- End #wrapper_gallery_list -->

                    <div id="wrapper_other_gallery">
                        <div id="hook_other_gallery" class="hook">
                            <div id="gother_1" class="gother_1">

                                <h1 class="heading">Other album</h1>

                                <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
                                <script type="text/javascript" src="js/jquery.elastislide.js"></script>
                                <script type="text/javascript">
                                    $(document).ready(function(){
                                        $('#carousel').elastislide({
                                            
                                            minItems	: 3,
                                            margin      : 80,
                                            border      : 4   
                                        });
                                    });
         
			
                                </script>
                                <div id="wrapper_album_list">
                                    <div id="carousel" class="es-carousel-wrapper">
                                        <div class="es-carousel">
                                            <ul>
                                                <li>
                                                    <div class="images">
                                                        <a href="#"><img src="images/1.png" alt="image23"/>

                                                        </a>
                                                        <a href="#" class="album_title">Proin interdum magna non justo interdum</a>
                                                    </div>
                                                </li>
                                                <li><a href="#"><img src="images/1.png" alt="image24" /></a>
                                                    <a href="#" class="album_title">Proin interdum magna non justo interdum</a>
                                                </li>
                                                <li><a href="#"><img src="images/1.png" alt="image25" /></a>
                                                    <a href="#" class="album_title">Proin interdum magna non justo interdum</a>
                                                </li>
                                                <li><a href="#"><img src="images/1.png" alt="image25" /></a>
                                                    <a href="#" class="album_title">Proin interdum magna non justo interdum</a>
                                                </li>
                                                <li><a href="#"><img src="images/1.png" alt="image25" /></a>
                                                    <a href="#" class="album_title">Proin interdum magna non justo interdum</a>
                                                </li>
                                                <li><a href="#"><img src="http://dantri4.vcmedia.vn/i:RIZNWFsXL4Thvv6ub1QL/Image/2012/06/Ukraine08061201_4e63a/thoi-diem-khai-mac-vong-chung-ket-euro-2012-da-den-rat-gan.jpg" alt="image25" /></a>
                                                    <a href="#" class="album_title">Proin interdum magna non justo interdum</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div><!-- End #wrapper_album_list -->
                            </div><!-- End .gother_1 -->
                        </div>
                    </div><!-- End #wrapper_other_gallery -->


                </div><!-- End #wrapper_gallery -->
            </div>

            <div id="wrapper_footer">
                <div id="wrapper_footer_section_1">

                    <div id="hook_footer_section_1" class="hook">

                        <div id="html_8" class="html_8">
                            <h1>
                                Tiara
                            </h1>
                            <h3>Restaurant</h3>
                        </div><!-- End .html_8 -->


                        <div id="html_9" class="html_9">

                            <h1>Contact info</h1>
                            <div class="address">8901 Marmora Road, Glasgow, D04 89GR.</div>
                            <ul>
                                <li>Freephone: <span>+1 800 559 6580</span></li>
                                <li>Telephone: <span>+1 800 603 6035</span></li>
                                <li>FAX: <span>+1 800 889 9898</span></li>
                                <li>E-mail: </span>mail@demolink.org</span></li>
                            </ul>


                        </div>
                        <!-- End .html_9 -->

                        <div id="social_8" class="social_8">

                            <h1>Keep in touch</h1>   
                            <ul>
                                <li>
                                    <img src="images/facebook.png" alt="facebook" /> 
                                    <a href="#">Facebook</a>
                                    <div style="clear: both;"></div>
                                </li>

                                <li class="right">
                                    <img src="images/google_plus.png" alt="google_plus" /> 
                                    <a href="#">Google Plus</a>
                                    <div style="clear: both;"></div>
                                </li>

                                <li>
                                    <img src="images/twitter.png" alt="twitter" /> 
                                    <a href="#">Twitter</a>
                                    <div style="clear: both;"></div>
                                </li>

                                <li class="right">
                                    <img src="images/rss.png" alt="rss" /> 
                                    <a href="#">RSS</a>
                                    <div style="clear: both;"></div>
                                </li>

                            </ul>

                        </div>
                        <!-- End .social_8 -->
                    </div>
                    <!-- End #hook_footer_section_1 -->

                </div><!-- End #wrapper_footer_section_1 -->
                <div id="wrapper_footer_section_1_foot"></div>

                <style>
                    #wrapper_footer_section_2 {
                        width: 940px;
                        margin: 0px auto;
                    }
                    #wrapper_footer_section_2 #hook_copyright {
                        height: 30px;
                    }

                    .html_10 {
                        position: absolute;
                        left:0px;
                        top: 0px;
                    }

                    .html_10 p {
                        font-family: Arial, sans-serif;
                        font-size: 11px;
                        color: #5d5d5e;
                    }
                </style>
                <div id="wrapper_footer_section_2">
                    <div id="hook_copyright" class="hook">
                        <div id="html_10" class="html_10">
                            <p>©2012 POWERED BY TIARA™. ALL RIGHT RESERVED.</p>
                        </div>

                    </div>
                </div><!-- End #wrapper_footer_section_2 -->
            </div><!-- End #wrapper_footer -->


        </div><!--END wrapper-->
    </body>
</html>